<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }

        #loading {
            position:absolute;
            top: 50%;
            left: 50%;
            margin-left: -130px;
            text-align: center;
            margin-top: -50px;
            width: 260px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.5);
            color: yellow;
            font-size: 30x;
        }

        #panel {
            background: #fff;
            border: 1px solid #ccc;
            position:absolute;
            padding: 10px;
            bottom: 10px;
            right: 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>

    <div id="map"></div>
    <div id="loading">纽约出租车145万上车点数据加载中...</div>
    <div id="panel">数据来源<a target="_blank" href="http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml">NYC Taxi(纽约出租车上车点)</a>
    </div>

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script type="text/javascript" src="../build/mapv.js"></script>
    <script type="text/javascript" src="js/dat.gui.js"></script>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });    // 创建Map实例
        map.centerAndZoom(new BMap.Point(-73.931577, 40.745654), 12);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        /*
        map.setMapStyle({
            style: 'midnight'
        });
        */

        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": {
                        "lightness": 61,
                        "saturation": -100
                    }
                }
            ]
        });

        $.get('data/nyc-taxi.csv', function(csvstr) {

            var options = {
                size: 1.5,
                context: 'webgl',
                fillStyle: 'rgba(250, 50, 50, 0.8)',
                draw: 'simple'
            }

            var dataSet = mapv.csv.getDataSet(csvstr);
            dataSet.initGeometry();

            var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

            $('#loading').hide();

            function finished() {
                mapvLayer.update({
                    options: options 
                });
            };

            var gui = new dat.GUI({
                nameMap: {
                    size: '大小',
                    fillStyle: '颜色'
                }
            });

            gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
            gui.addColor(options, 'fillStyle').onChange(finished);

        });

    </script>
	
</body>
</html>
